<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>待办事项 - TodoList</title>
		<style type="text/css"></style>
	</head>
	<body>
		<div id="app">
			<h2>{{title}}</h2>
			<!-- 回车添加数据，双向数据绑定 -->
			<input type="text" @keydown.enter="insert" v-model="msg" />
			<!-- 点击搜索 -->
			<button type="button" @click="search">搜索</button>
			<!-- 全选，使用计算属性，借助set进行双向数据绑定 -->
			<p><input type="checkbox" v-model="allSelect" />全选</p>
			<ul>
				<!-- 渲染列表，因为将来要搜索数据，渲染searchList -->
				<li v-for="item in searchList" :key="item.id">
					<input type="checkbox" v-model="item.select" />
					<!-- 更新数据的输入框：显示 -->
					<input v-if="item.state" type="text" v-model="str" @keydown.enter="ok(item.id)" @keydown.esc="esc(item.id)"/>
					<!-- 显示数据的标签：隐藏 -->
					<span @click="update(item.id)" v-else>{{item.msg}}</span>
					<!-- 删除功能，在搜索之后不存在 -->
					<button type="button" @click="del(item.id)"v-if="show">删除</button>
				</li>
			</ul>
		</div>
	</body>
	<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		
		new Vue({
			el:"#app",
			data:{
				title:"待办事项",		// 标题
				list:[],			// 原始数据
				msg:"",				// 输入框数据
				start:0,			// 数据的id起始值
				str:"",				// 更新数据时的临时数据
				searchList:[],		// 搜索之后的数据
				show:true			// 是否需要删除
			},
			computed:{
				// 全选的复选框的双向数据绑定的数据
				allSelect:{
					// 默认执行
					get(){
						return this.list.every(val=>{
							return val.select;
						})
					},
					// 修改时执行set
					set(v){
						this.list.forEach(val=>{
							val.select = v;
						})
					}
				}
			},
			methods:{
				insert(){
					// 回车添加数据功能
					this.list.push({
						id:this.start++,	// 唯一编号
						msg:this.msg,		// 数据内容
						state:false,		// 是否正在被修改
						select:false		// 选中状态
					})
					this.msg = "";
					// 同步searchList和list
					this.searchList = this.list;
				},
				del(id){
					let i = 0;
					this.list.some((val,idx)=>{
						i = idx;
						return val.id === id
					});
					// 删除原始数据
					this.list.splice(i,1);
				},
				update(id){
					let i = 0;
					this.list.some((val,idx)=>{
						i = idx;
						return val.id === id
					})
					// 同时决定显示数据的视图和输入框视图的显示和隐藏
					this.list[i].state = true;
					// 更新原始数据
					this.str = this.list[i].msg;
				},
				ok(id){
					let i = 0;
					this.list.some((val,idx)=>{
						i = idx;
						return val.id === id
					})
					// 修改成功后,决定显示数据的视图和输入框视图的显示和隐藏
					this.list[i].state = false;
					// 修改原始数据
					this.list[i].msg = this.str;
				},
				esc(id){
					let i = 0;
					this.list.some((val,idx)=>{
						i = idx;
						return val.id === id
					})
					// 取消本次修改,决定显示数据的视图和输入框视图的显示和隐藏
					this.list[i].state = false;
				},
				search(){
					this.show = false;
					// 查询原始数据，是否包含要搜索的字符
					this.searchList = this.list.filter(val=>{
						return val.msg.includes(this.msg);
					})
				}
			}
		})
		
	</script>
</html>
